import { ScrollView, View, Text, Image } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import moment from 'dayjs';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      noticeDetail: {},
    };
  }

  componentDidMount() {
    let params = getCurrentInstance().router.params;
    let op = JSON.parse(params.op);
    this.setState({
      noticeDetail: op,
    });
  }

  componentDidShow() { }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  imgRender(refImage) {
    let imgList = [];
    let urls = [];
    if (refImage && refImage.length > 0) {
      refImage.map((item, index) => {
        urls.push(item.imageUrl);
        imgList.push(
          <Image
            key={index}
            onClick={(e) => {
              e.stopPropagation();
              this.onImageClick(item.imageUrl, urls)
            }}
            src={item.imageUrl}
            mode="widthFix"
            style={{
              width: '100%',
              marginBottom: '30rpx',
            }}
          />,
        );
      });
    }
    return imgList;
  }

  onImageClick = (item, urls) => {
    this.previewImage(item, urls);
  };
  previewImage = (img, files) => {
    Taro.previewImage({
      current: img, // 当前显示图片的http链接
      urls: files, // 需要预览的图片http链接列表
    });
  };

  render() {
    let { noticeDetail } = this.state;
    return (
      <ScrollView className="noticeDetail" scrollY>
        <View>
          <Text className="title">{noticeDetail.title ? noticeDetail.title : ''}</Text>
          <View className="m_box">
            {noticeDetail.title && <Text className="plot">发布小区: {noticeDetail.communityName}</Text>}
            <Text className="plot">
              {noticeDetail.publishDate ? moment(noticeDetail.publishDate).format('YYYY-MM-DD HH:mm:ss') : ''}
            </Text>
          </View>
          <View className="contentBox">
            <Text className="content">&emsp;&emsp;{noticeDetail.details}</Text>
          </View>
          <View className="imgBox">{this.imgRender(noticeDetail.refImage)}</View>
        </View>
      </ScrollView>
    );
  }
}
